<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt_rt"%>
<%@ taglib prefix="security" uri="http://www.springframework.org/security/tags"%>

<div class="profile-tab-container">
	<security:authorize ifNotGranted="GUEST_ACCESS">
		<div class="pull-right">
			<a class="btn btn-primary btn-mini" href="${url_context}/treatment/form.jspx?patientId=${patient.id}&action=create"><i class="icon-plus icon-white"></i> New treatment</a>
		</div>
	</security:authorize>
	<c:if test="${empty patient.treatments}">
		<div class="text-info pull-left">
			There are no records to be displayed.
		</div>
	</c:if>
	<div class="clear"></div>
	
	<c:if test="${not empty patient.treatments}">
		<div class="treatment-list">
			<c:forEach var="treatment" items="${patient.sortedTreatment}">
				<div class="list-item pointer" id="list-item-${treatment.id}">
					<span class="oranged">${treatment.procedure.name}</span><br/>
					Performed by: ${treatment.performedBy.prettyName}<br/>
					Date: <fmt:formatDate value='${treatment.treatmentDate}' pattern="MMMM dd yyyy"/>
				</div>
			</c:forEach>
		</div>
		<div id="preview-wrapper">
			<div class="text-info">
	  			<strong>Tip!</strong> Click on a treatment on the left to see its preview.
			</div>
		</div>
		<div class="clear"></div>
	</c:if>
	
	

	
</div>
<script type="text/javascript">
	$(document).ready(function(){
		$('.profile-tab-container').fadeIn(500);
		
		$('.list-item').click(function(){
			$('.list-item').removeClass('clicked');
			$(this).addClass('clicked');
			var elemId = $(this).attr("id"),
			elemIndex = elemId.split("-")[2];
			IRIS.ajaxUtil.ajaxInclude('${url_context}/treatment.jspx?peak=true&id='+elemIndex,'preview-wrapper');
		});
		
	});
</script>